<template>
  <div>
    <div ref="chartPie" style="width: 600px; height: 400px; float: left"></div>
    <div
      ref="chartLine"
      style="width: 600px; height: 400px; float: right; margin-right: 20px"
    ></div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, nextTick } from 'vue'
import * as echarts from 'echarts'
import { userArticleDayInfoServices, userArticleInfoServices } from '@/api/user.js'

// 创建一个响应式引用来保存DOM元素
const chartPie = ref(null)
const chartLine = ref(null)
let chartInstance = null
const articleInfo = ref([])
const days = ref([])
const daysInfo = ref([])

// 初始化ECharts实例并设置配置项（这里以折线图为例，但可灵活替换）
onMounted(async () => {
  days.value = getDatesOfThisWeek()
  let res = await userArticleInfoServices()
  articleInfo.value = res.data
  res = await userArticleDayInfoServices()
  daysInfo.value = res.data
  await nextTick() // 确保DOM已经渲染完成
  chartInstance = echarts.init(chartPie.value)
  chartInstance.setOption(articleInfoData())
  chartInstance = echarts.init(chartLine.value)
  chartInstance.setOption(lineData())
})
const articleInfoData = () => {
  const option = {
    // 这里是ECharts的配置项，可以根据需要绘制不同类型的图表
    title: {
      text: 'ECharts 示例图表',
      left: 'right'
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
    legend: {
      orient: 'horizontal',
      left: 'left'
    },
    series: [
      {
        name: '文章分布',
        type: 'pie', // 这里可以是'line'、'bar'、'pie'等，根据图表类型选择
        data: articleInfo.value,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  }
  return option
}
const lineData = () => {
  const option = {
    tooltip: {
      trigger: 'axis'
    },
    grid: {
      left: '3%', // 调整左边距
      right: '3%', // 调整右边距
      bottom: '3%', // 调整底部边距
      top: '5%', // 调整顶部边距
      containLabel: true // 确保标签和轴标题被包含在容器内
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: days.value, // 示例数据
      axisLine: {
        show: false // 不显示横坐标轴线
      },
      axisTick: {
        show: false // 不显示刻度线
      }
    },
    yAxis: {
      type: 'value',
      min: 0, // 设置Y轴的最小值
      max: 10, // 设置Y轴的最大值
      interval: 1, // 设置Y轴的刻度间隔
      axisLabel: {
        formatter: '{value}'
      }
    },
    series: [
      {
        name: '发表文章',
        type: 'line',
        data: daysInfo.value, // 示例数据，模拟起伏更大
        // smooth: true, // 折线平滑
        lineStyle: {
          width: 2,
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            { offset: 0, color: '#62c1fe' },
            { offset: 0.5, color: '#ad90f7' },
            { offset: 1, color: '#e875f2' }
          ])
        },
        symbolSize: (value, params) => {
          // 获取数据系列的长度
          const seriesLength = option.series[0].data.length
          // 中间节点放大
          if (params.dataIndex === Math.floor(seriesLength / 2)) {
            return 8 // 中间节点的大小
          }
          return 8 // 其他节点的大小
        }
      }
    ]
  }
  return option
}
const getDatesOfThisWeek = () => {
  const today = new Date()
  // 确定今天是一周中的哪一天，0代表周日，1代表周一，以此类推
  const dayOfWeek = today.getDay()
  // 如果今天是周日，那么周一应该是昨天，否则周一就是今天减去今天是一周中的第几天
  const firstDayOffset = dayOfWeek === 0 ? 6 : 1 - dayOfWeek
  let firstDay
  // 创建本周第一天的日期对象
  if (firstDayOffset >= 0) {
    firstDay = new Date(today.setDate(today.getDate() - firstDayOffset))
  } else {
    firstDay = new Date(today.setDate(today.getDate() + firstDayOffset))
  }
  // 创建一个数组来保存本周的日期
  const datesOfThisWeek = []
  // 遍历每一天并添加到数组中
  for (let i = 0; i < 7; i++) {
    const date = new Date(firstDay.getTime() + i * 24 * 60 * 60 * 1000)
    datesOfThisWeek.push(date.toISOString().substring(0, 10)) // YYYY-MM-DD 格式
  }
  return datesOfThisWeek
}
// 销毁ECharts实例
onUnmounted(() => {
  if (chartInstance != null && chartInstance.dispose) {
    chartInstance.dispose()
  }
})
</script>

<style scoped>
/* 添加一些CSS样式来美化图表容器（可选） */
</style>
